<template>
    <div class="big-box">
        <div class="header">
            <img src="../../../../../assets/bigScreen/header3.png" alt="" />
        </div>
        <div class="backToBox">
            <div class="backTo" @click="gotoHome">
                <div>返回总窗口</div>
            </div>
            <div class="backTo" @click="backToOne">
                <div>返回上一页</div>
            </div>
        </div>
        <div class="centerBox">
            <div class="sreenTitle">{{tabIndex=='1'?'科技成果':'成果需求'}}</div>
            <div class="center">

        <!-- 找项目 -->
        <div v-if="tabIndex == 1">
            <!-- 筛选区 -->
            <div class="filter-box">
                <div class="filter-title-box">
                    <div class="filter-title">筛选条件</div>
                    <!-- <div class="adds" @click="toPage('gainAdd')">立即发布</div> -->
                    <div class="filter-input-box">
                        <div class="filter-input"><input type="text" placeholder="请输入关键词" v-model="params.name"
                                @keydown="onkeydown" /></div>
                        <div class="filter-btn" @click="getList('refresh')">搜索</div>
                    </div>
                </div>
                <div class="filter-container">
                    <div class="filter-type" v-for="(item, index) in typeList"
                        :style="{ height: item.showMore ? 'initial' : '55px' }">
                        <div class="filter-type-title">{{ item.title }}</div>
                        <div style="width: calc(100% - 11rem - 40px);">
                            <div :class="['filter-item', typeIds[index] == null ? 'active' : '']"
                                @click="setType(index, { name: null, id: null }, item.fields)">全部</div>
                            <div v-for="sItem in item.list"
                                :class="['filter-item', typeIds[index] == sItem.id ? 'active' : '']" :key="sItem.id"
                                @click="setType(index, sItem, item.fields)">
                                {{ sItem.name }}
                            </div>
                        </div>
                        <div class="filter-more-btn" @click="item.showMore = !item.showMore">
                            <span>更多分类</span>
                            <img :style="{ transform: item.showMore ? 'scaleY(-1)' : 'scaleY(1)' }"
                                src="../../../../../assets/down.png" alt="" />
                        </div>
                    </div>
                    <div class="filter-type" 
                        :style="{ height: arearShowMore ? 'initial' : '55px' }">
                        <div class="filter-type-title">所在地</div>
                        <div style="width: calc(100% - 11rem - 40px);">
                            <div :class="areaIndex == index ? 'filter-item active' : 'filter-item'"
                                v-for="(item, index) in areadata[0].children" @click="areaIndex = index; getOrg()"
                                :key="index">
                                <span v-if="item.name=='市直属'">{{areadata[0].name}}</span>
                                <span v-else>{{item.name}}</span>
                            </div>
                            <div :class="areaIndex == -1 ? 'filter-item active' : 'filter-item'"
                                 @click="areaIndex = -1; getOrg()">
                                <span>其他</span>
                            </div>
                        </div>
                        <div class="filter-more-btn" @click="arearShowMore = !arearShowMore">
                            <span>更多分类</span>
                            <img :style="{ transform: arearShowMore ? 'scaleY(-1)' : 'scaleY(1)' }"
                                src="../../../../../assets/down.png" alt="" />
                        </div>
                    </div>
                </div>
            </div>
            <div class="product-container">
                <div class="product-item" v-for="(v, k) in resultList" :key="k" @click="toPage('/bigScreen/outcomeDetail?id=' + v.id)">
                    <div class="product-title">{{ v.name }}</div>
                    <div class="product-text two-lines" v-html="v.description"></div>
                    <div class="product-tag-box">
                        <div class="product-tag yellow">{{ v.shape && v.shape.note  }}</div>
                        <div class="product-tag">{{ v.stage && v.stage.note }}</div>
                        <div class="product-tag">{{ v.finishEndTime}}</div>
                    </div>
                    <div class="star-box">
                        <div class="star-title">
                            {{ v.technicalLevel }}
                        </div>
                        <div class="star-title">
                            {{ v.transactionMoney }}
                        </div>
                    </div>
                </div>
                <no-data v-if="!resultList.length" />
            </div>
            <div class="pagination-box">
                <a-pagination :showSizeChanger='false' v-model:current="params.number" v-model:pageSize="params.size"
                    :total="params.total" @change="onShowSizeChange" />
            </div>
        </div>
        <!-- 找需求 -->
        <div v-if="tabIndex == 2">
            <!-- 筛选区 -->
            <div class="filter-box">
                <div class="filter-title-box">
                    <div class="filter-title">筛选条件</div>
                    <!-- <div class="adds" @click="toPage('gainAdd2')">立即发布</div> -->
                    <div class="filter-input-box">
                        <div class="filter-input"><input type="text" placeholder="请输入关键词" v-model="params2.name"
                                @keydown="onkeydown2" />
                        </div>
                        <div class="filter-btn" @click="getListDem('refresh')">搜索</div>
                    </div>
                </div>
                <div class="filter-container">
                    <div class="filter-type" v-for="(item, index) in typeList2"
                        :style="{ height: item.showMore ? 'initial' : '55px' }">
                        <div class="filter-type-title">{{ item.title }}</div>
                        <div :class="['filter-item', typeIds2[index] == null ? 'active' : '']"
                            @click="setType2(index, { name: null, id: null }, item.fields)">全部</div>
                        <div v-for="sItem in item.list"
                            :class="['filter-item', typeIds2[index] == sItem.id ? 'active' : '']" :key="sItem.id"
                            @click="setType2(index, sItem, item.fields)">
                            {{ sItem.name }}
                        </div>
                        <div class="filter-more-btn" @click="item.showMore = !item.showMore">
                            <span>更多分类</span>
                            <img :style="{ transform: item.showMore ? 'scaleY(-1)' : 'scaleY(1)' }"
                                src="../../../../../assets/down.png" alt="" />
                        </div>
                    </div>
                    <div class="filter-type"
                        :style="{ height: arearShowMore ? 'initial' : '55px' }">
                        <div class="filter-type-title">所在地</div>
                        <div style="width: calc(100% - 11rem - 40px);">
                            <div :class="areaIndex == index ? 'filter-item active' : 'filter-item'"
                                v-for="(item, index) in areadata[0].children" @click="areaIndex = index; getOrg1()"
                                :key="index">
                                <span v-if="item.name=='市直属'">{{areadata[0].name}}</span>
                                <span v-else>{{item.name}}</span>
                            </div>
                            <div :class="areaIndex == -1 ? 'filter-item active' : 'filter-item'"
                                 @click="areaIndex = -1; getOrg1()">
                                <span>其他</span>
                            </div>
                        </div>
                        <div class="filter-more-btn" @click="arearShowMore = !arearShowMore">
                            <span>更多分类</span>
                            <img :style="{ transform: arearShowMore ? 'scaleY(-1)' : 'scaleY(1)' }"
                                src="../../../../../assets/down.png" alt="" />
                        </div>
                    </div>
                </div>
            </div>
            <div class="product-container">
                <div class="product-item" v-for="(v, k) in demandList" :key="k"  @click="toPage('/bigScreen/outcomeDetailDem?id=' + v.id)">
                    <div class="product-title">{{ v.name }}</div>
                    <div class="product-text two-lines" v-if="v.demandIntroduce">{{ v.demandIntroduce }}</div>
                    <div class="product-tag-box" v-if="v.demandIndustryType">
                        <div class="product-tag yellow">{{ v.demandIndustryType }}</div>
                        <!-- <div class="product-tag">{{ v.patentType }}</div> -->
                        <!-- <div class="product-tag">{{ v.grantTime || '暂无' }}</div> -->
                    </div>
                    <div class="star-box">
                        <div class="star-title" style="width: calc(100% - 17rem);">
                            联系人
                            <span>{{ v.demandCompanyPeople }}</span>
                        </div>
                        <div class="star-title" style="width: 17rem;">
                            联系电话
                            <span>{{ v.demandCompanyPhone }}</span>
                        </div>
                    </div>
                </div>
                <no-data v-if="!demandList.length" />
            </div>
            <div class="pagination-box">
                <a-pagination :showSizeChanger='false' v-model:current="params2.number" v-model:pageSize="params2.size"
                    :total="params2.total" @change="onShowSizeChange2" />
            </div>
        </div>
            </div>
        </div>
    </div>
</template>

<script>
import headerBox from '../../../../../components/header.vue';
import headerImg from '../../../../../components/headerImg.vue';
import footerBox from '../../../../../components/footer-box.vue';
import {
    getResultListMore,
    getDemandListMore
} from '../../../../../api/gain.js';
import {
    getCooperationTypeList,
    getDemandTypeList,
    getShapeList
} from '../../../../../api/technology'
import { getarea } from '../../../../../api/home'
import noData from "../../../no-data.vue"
import {
    useRouter
} from 'vue-router';
export default {
    components: {
        headerBox,
        headerImg,
        footerBox,
        noData
    },
    data() {
        return {
            headerKey: 0,
            arearShowMore: false,
            areaIndex: 0,
            areadata: [{children:[]}],
            routers: useRouter(),
            current: 6,
            tabIndex: 1,
            typeIds: [null, null, null, null, null, null],
            typeList: [{
                title: '行业类型',
                fields: 'industry',
                showMore: false,
                list: [{
                    name: '农、林、牧、渔业',
                    id: 1
                },
                {
                    name: '采矿业',
                    id: 2
                },
                {
                    name: '制造业',
                    id: 3
                },
                {
                    name: '水利环境公共设施管理',
                    id: 4
                },
                {
                    name: '居民服务、修理和其他',
                    id: 5
                },
                {
                    name: '教育',
                    id: 6
                },
                {
                    name: '卫生和社会工作',
                    id: 7
                },
                {
                    name: '文化、体育和娱乐业',
                    id: 8
                },
                {
                    name: '烟草制品业',
                    id: 9
                },
                {
                    name: '酒、饮料和精制茶制造业',
                    id: 10
                },
                {
                    name: '电力热力燃气及水生产供应',
                    id: 11
                },
                {
                    name: '建筑业',
                    id: 12
                },
                {
                    name: '批发和零售业',
                    id: 13
                },
                {
                    name: '交通运输、仓储和邮政业',
                    id: 14
                },
                {
                    name: '住宿和餐饮业',
                    id: 15
                },
                {
                    name: '信息传输软件和信息技术',
                    id: 16
                },
                {
                    name: '金融业',
                    id: 17
                },
                {
                    name: '房地产业',
                    id: 18
                },
                {
                    name: '租赁和商务服务业',
                    id: 19
                },
                {
                    name: '制造业',
                    id: 20
                }
                ]
            },
            {
                title: '成果形式',
                fields: 'shape',
                showMore: false,
                list: [
                //     {
                //     name: '发明类型',
                //     id: 1
                // },
                // {
                //     name: '发明专利',
                //     id: 2
                // },
                // {
                //     name: '非专利',
                //     id: 3
                // },
                // {
                //     name: '软件著作权',
                //     id: 4
                // },
                // {
                //     name: '实用新型专利',
                //     id: 5
                // },
                // {
                //     name: '专利',
                //     id: 6
                // }, {
                //     name: '外观设计',
                //     id: 7
                // }, {
                //     name: '发明专利',
                //     id: 8
                // }
                ]
            },
            // {
            //     title: '交易方式',
            //     fields: 'transactionMode',
            //     showMore: false,
            //     list: [{
            //         name: '5年独占许可',
            //         id: 1
            //     },
            //     {
            //         name: '技术入股',
            //         id: 2
            //     },
            //     {
            //         name: '完全转让',
            //         id: 3
            //     },
            //     {
            //         name: '许可转让',
            //         id: 4
            //     }
            //     ]
            // },
            // {
            //     title: '所在地',
            //     fields: 'city',
            //     showMore: false,
            //     list: [{
            //         name: '呼和浩特市',
            //         id: 1
            //     },
            //     {
            //         name: '包头市',
            //         id: 2
            //     },
            //     {
            //         name: '乌海市',
            //         id: 3
            //     },
            //     {
            //         name: '赤峰市',
            //         id: 4
            //     },
            //     {
            //         name: '通辽市',
            //         id: 5
            //     },
            //     {
            //         name: '鄂尔多斯市',
            //         id: 6
            //     },
            //     {
            //         name: '呼伦贝尔市',
            //         id: 7
            //     },
            //     {
            //         name: '巴彦淖尔市',
            //         id: 8
            //     },
            //     {
            //         name: '乌兰察布市',
            //         id: 9
            //     },
            //     {
            //         name: '锡林郭勒盟',
            //         id: 10
            //     },
            //     {
            //         name: '阿拉善盟',
            //         id: 11
            //     },
            //     {
            //         name: '兴安盟',
            //         id: 12
            //     }
            //     ]
            // },
            // {
            //     title: '金额',
            //     fields: 'transactionMoney',
            //     showMore: false,
            //     list: [
            //     {
            //         name: '1万以下',
            //         id: 2
            //     },
            //     {
            //         name: '1万-10万',
            //         id: 3
            //     },
            //     {
            //         name: '10万-50万',
            //         id: 4
            //     },
            //     {
            //         name: '50-100万',
            //         id: 5
            //     },
            //     {
            //         name: '100万以上',
            //         id: 6
            //     }
            //     ]
            // },
            // {
            //     title: '技术成熟度',
            //     fields: 'technicalLevel',
            //     showMore: false,
            //     list: [{
            //         name: '可以量产',
            //         id: 1
            //     },
            //     {
            //         name: '通过小试',
            //         id: 2
            //     },
            //     {
            //         name: '通过中试',
            //         id: 3
            //     },
            //     {
            //         name: '已有样品',
            //         id: 4
            //     },
            //     {
            //         name: '正在研发',
            //         id: 5
            //     }
            //     ]
            // }
            ],
            typeList2: [{
                title: '行业分类',
                fields: 'demandIndustryType',
                showMore: false,
                list: [{
                    name: '农、林、牧、渔业',
                    id: 1
                },
                {
                    name: '采矿业',
                    id: 2
                },
                {
                    name: '制造业',
                    id: 3
                },
                {
                    name: '水利环境公共设施管理',
                    id: 4
                },
                {
                    name: '居民服务、修理和其他',
                    id: 5
                },
                {
                    name: '教育',
                    id: 6
                },
                {
                    name: '卫生和社会工作',
                    id: 7
                },
                {
                    name: '文化、体育和娱乐业',
                    id: 8
                },
                {
                    name: '公共管理保障组织',
                    id: 9
                },
                {
                    name: '国际组织',
                    id: 10
                },
                {
                    name: '电力热力燃气及水生产供应',
                    id: 11
                },
                {
                    name: '建筑业',
                    id: 12
                },
                {
                    name: '批发和零售业',
                    id: 13
                },
                {
                    name: '交通运输、仓储和邮政业',
                    id: 14
                },
                {
                    name: '住宿和餐饮业',
                    id: 15
                },
                {
                    name: '信息传输软件和信息技术',
                    id: 16
                },
                {
                    name: '金融业',
                    id: 17
                },
                {
                    name: '房地产业',
                    id: 18
                },
                {
                    name: '租赁和商务服务业',
                    id: 19
                },
                {
                    name: '科学研究和技术服务业',
                    id: 20
                }
                ]
            },
            // {
            //     title: '奖励金额',
            //     fields: 'money',
            //     showMore: false,
            //     list: [
            //         {
            //         name: '面议',
            //         id: 1
            //     },
            //     {
            //         name: '1万以下',
            //         id: 2
            //     },
            //     {
            //         name: '1万-10万',
            //         id: 3
            //     },
            //     {
            //         name: '10万-50万',
            //         id: 4
            //     },
            //     {
            //         name: '50-100万',
            //         id: 5
            //     },
            //     {
            //         name: '100万以上',
            //         id: 6
            //     }
            //     ]
            // },
            {
                title: '合作方式',
                fields: 'demandCooperateType',
                showMore: false,
                list: []
            },
            {
                title: '需求类型',
                fields: 'demandType',
                showMore: false,
                list: []
            },
            // {
            //     title: '所在地',
            //     fields: 'cityCode',
            //     showMore: false,
            //     list: [{
            //         name: '呼和浩特市',
            //         id: 1
            //     },
            //     {
            //         name: '包头市',
            //         id: 2
            //     },
            //     {
            //         name: '乌海市',
            //         id: 3
            //     },
            //     {
            //         name: '赤峰市',
            //         id: 4
            //     },
            //     {
            //         name: '通辽市',
            //         id: 5
            //     },
            //     {
            //         name: '鄂尔多斯市',
            //         id: 6
            //     },
            //     {
            //         name: '呼伦贝尔市',
            //         id: 7
            //     },
            //     {
            //         name: '巴彦淖尔市',
            //         id: 8
            //     },
            //     {
            //         name: '乌兰察布市',
            //         id: 9
            //     },
            //     {
            //         name: '锡林郭勒盟',
            //         id: 10
            //     },
            //     {
            //         name: '阿拉善盟',
            //         id: 11
            //     },
            //     {
            //         name: '兴安盟',
            //         id: 12
            //     }
            //     ]
            // }
            ],
            resultList: [],
            demandList: [],
            typeIds2: [null, null, null, null, null, null],
            params: {
                number: 1,
                size: 9,
                total: 0,
                name: null,
                oneType: null,
                city: null,
                transactionMoney: null,
                patentType: null,
                transactionMode: null,
                technicalLevel: null
            },
            params2: {
                number: 1,
                size: 9,
                total: 0,
                name: null,
                technicalField: null,
                money: null,
                cooperationMode: null,
                type: null,
                cityCode: null
            }
        }
    },
    mounted() {
        this.getList();
        this.getListDem();
        this.getArear();
        this._getCooperationTypeList()
        this._getDemandTypeList()
        this._getShapeList()
        if (this.$route.query.tabIndex) {
            this.tabIndex = this.$route.query.tabIndex;
        }
        if (this.$route.query.current) {
            this.tabIndex = this.$route.query.current;
        }
        this.setTabIndex(this.tabIndex)
    },
    methods: {
        _getShapeList() {
            getShapeList().then((res) => {
                if (res.code == 200) {
                    let data = res.data
                    data.map(item => {
                        this.typeList[1].list.push({
                            name: item.note,
                            id: item.value
                        })
                    })
                }
            })
        },
        _getDemandTypeList() {
            getDemandTypeList().then((res) => {
                if (res.code == 200) {
                    let data = res.data
                    data.map(item => {
                        this.typeList2[2].list.push({
                            name: item.note,
                            id: item.value
                        })
                    })
                }
            })
        },
        _getCooperationTypeList() {
            getCooperationTypeList().then((res) => {
                if (res.code == 200) {
                    let data = res.data
                    data.map(item => {
                        this.typeList2[1].list.push({
                            name: item.note,
                            id: item.value
                        })
                    })
                }
            })
        },
        getArear(){
            getarea({}).then((res) => {
                if (res.code == 200) {
                    this.areadata = res.data
                    this.areadata[0].children = this.areadata[0].children.filter(item => item.name != '特殊机构' && item.name != '自治区直属')
                    // .map((item, index) => {
                    //     if(item.name == '特殊机构' || item.name == '自治区直属') {
                    //         this.areadata[0].children.slice(index, 1)
                    //     }
                    // })
                    if (localStorage.getItem('orgInfo')) {
                         this.areaIndex = JSON.parse(localStorage.getItem('orgInfo')).areaIndex
                    }
                }
            })
        },
        getOrg(){
            var orgInfo = {}
            if(this.areaIndex==-1){
                orgInfo = {}
            }
            // else 
            // if(this.areaIndex==0){
            //     orgInfo = { orgId: this.areadata[0].id, areaIndex: this.areaIndex, areaName: '' }
            // }
            else{
                orgInfo = { orgId: this.areadata[0].children[this.areaIndex].id, areaIndex: this.areaIndex, areaName: '' }
            }
            console.log(this.areadata[0].children[this.areaIndex]);
             localStorage.setItem('orgInfo', JSON.stringify(orgInfo))
            this.getList();
            this.headerKey++
        },
        getOrg1(){
            var orgInfo = {}
            if(this.areaIndex==-1){
                orgInfo = {}
            }
            // else if(this.areaIndex==0){
            //     orgInfo = { orgId: this.areadata[0].id, areaIndex: this.areaIndex, areaName: '' }
            // }
            else{
                orgInfo = { orgId: this.areadata[0].children[this.areaIndex].id, areaIndex: this.areaIndex, areaName: '' }
            }
             localStorage.setItem('orgInfo', JSON.stringify(orgInfo))
            this.getListDem();
            this.headerKey++
        },
        setTabIndex(index) {
            localStorage.setItem('tabIndex', index)
        },
        toPage(url) {
            this.routers.push(url);
        },
        setType(index, type, fields) {
            this.typeIds[index] = type.id;
            if (fields == 'transactionMoney' || fields == 'shape') {
                this.params[fields] = type.id;
            } else {
                this.params[fields] = type.name;
            }
            this.getList();
        },
        setType2(index, type, fields) {
            this.typeIds2[index] = type.id;
            if (fields == 'money' || fields == 'demandType' || fields == 'demandCooperateType') {
                this.params2[fields] = type.id;
            } else {
                this.params2[fields] = type.name;
            }
            this.getListDem();
        },
        // 找成果列表
        getList(type) {
            if(type=='refresh'){
                this.params.number=1
            }
            var datas={ ...this.params }
            if(this.areaIndex==-1){
                datas.orgFlag = '0'
            }
            getResultListMore(datas).then(res => {
                if (res.code === 200) {
                    this.resultList = res.data.list;
                    this.params.total = res.data.total ? res.data.total : 0;
                }
            });
        },
        onkeydown(e) {
            if (e.key == 'Enter') {
                this.getList()
            }
        },
        // 找需求列表
        getListDem(type) {
            
            if(type=='refresh'){
                this.params2.number=1
            }
            getDemandListMore(this.params2).then(res => {
                if (res.code === 200) {
                    this.demandList = res.data.list;
                    this.params2.total = res.data.total ? res.data.total : 0;
                }
            });
        },
        onkeydown2(e) {
            if (e.key == 'Enter') {
                this.getListDem()
            }
        },
        onShowSizeChange(current, pageSize) {
            this.params.number = current
            this.params.size = pageSize
            this.getList()
        },
        onShowSizeChange2(current, pageSize) {
            this.params2.number = current
            this.params2.size = pageSize
            this.getListDem()
        },
        gotoHome() {
            this.$router.push({
                path: '/bigScreenIndex',
            })
        },
        backToOne() {
            console.log('11');
            this.$router.go(-1)
        },
    }
}
</script>

<style scoped lang="scss">
@font-face {
    font-family: "ffa";
    src: url(../../../assets/bigScreen/fonts/DS-DIGIB.TTF);
}
ul,
li {
    list-style: none;
}
.big-box {
    background-color: #071c3b;
    height: 100vh;
}
.header {
    text-align: center;
    position: relative;
    height: 19.1rem;

    > img {
        width: 100%;
        max-height: 100%;
        margin-top: -1.1rem;
        image-rendering: -moz-crisp-edges; /* Firefox */
        image-rendering: -o-crisp-edges; /* Opera */
        image-rendering: -webkit-optimize-contrast; /* Webkit (non-standard naming) */
        image-rendering: crisp-edges;
        -ms-interpolation-mode: nearest-neighbor; /* IE (non-standard property) */
    }
}
.centerBox {
    width: 96%;
    margin: 0 auto;
    position: absolute;
    top: 14rem;
    left: 2%;
    .sreenTitle {
        background-image: url("../../../../../assets/bigScreen/sreenTitle.png");
        background-size: 100% 100%;
        height: 3.8rem;
        padding-left: 35px;
        font-weight: 600;
        color: #fff;
        display: flex;
        align-items: center;
    }
    .center {
        margin-top: 1rem;
        height: calc(100vh - 20rem);
        border: 1px solid;
        border-image: linear-gradient(
                130deg,
                #2385df 0%,
                rgba(35, 133, 223, 0.65) 92%
            )
            1;
        overflow-y: scroll;
        padding: 20px;
            
.filter-box {
    width: 136rem;
    margin: 0 auto;
    margin-bottom: 20px;
    padding: 20px 40px;
    // background-color: #ffffff;
}

.filter-title-box {
    width: 100%;
    height: 60px;
    border-bottom: 1px solid #104B99;
}

.adds {
    float: right;
    width: 120px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    background: #037aff;
    border-radius: 4px;
    font-size: 15px;
    color: #ffffff;
    cursor: pointer;
    margin-left: 2rem;
}

.filter-title {
    line-height: 40px;
    float: left;
    font-size: 18px;
    font-weight: bold;
    color: #037aff;
}

.filter-input-box {
    width: 500px;
    height: 40px;
    float: right;
}

.filter-input {
    width: 380px;
    height: 40px;
    padding: 4px 20px;
    float: left;
    border-top: 1px solid #104B99;
    border-left: 1px solid #104B99;
    border-bottom: 1px solid #104B99;
    ::v-deep input{
        background-color: transparent;
        color: #fff;
    }
}

.filter-input input {
    width: 340px;
    height: 30px;
    border: none;
    outline: none;
}

.filter-btn {
    width: 120px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    background: #037aff;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    float: left;
    font-size: 15px;
    color: #ffffff;
    cursor: pointer;
}

.filter-container {
    width: 100%;
    padding-top: 20px;
}

.filter-type {
    height: 55px;
    position: relative;
    padding-right: 90px;
    overflow: hidden;
    display: flex;
    flex-wrap: wrap;
}

.filter-more-btn {
    position: absolute;
    right: 0;
    top: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
}

.filter-more-btn span {
    font-size: 16px;
    color: #037aff;
}

.filter-more-btn img {
    width: 10px;
    height: 5px;
    margin-left: 8px;
    margin-top: 8px;
}

.filter-type.last .filter-item {
    margin-bottom: 0;
}

.filter-type-title {
    display: inline-block;
    width: 11rem;
    margin-right: 40px;
    font-size: 17px;
    font-weight: bold;
    color: #ffffff;
}

.filter-item {
    display: inline-block;
    margin-bottom: 30px;
    padding: 0 15px;
    height: 25px;
    line-height: 25px;
    border-radius: 4px;
    font-size: 16px;
    color: #ffffff;
    cursor: pointer;
}

.filter-item.active {
    background-color: #037aff;
    color: #fff;
}

.product-container {
    width: 136rem;
    margin: 3rem auto;
    display: flex;
    flex-wrap: wrap;

    .product-item {
        width: 44rem;
        min-height: 100px;
        // height: max-content;
        height: auto;
        display: inline-block;
        margin-right: 2rem;
        margin-bottom: 2rem;
        padding: 2rem;
        background: #082853;
        border-radius: 8px;
        cursor: pointer;
        border: 1px solid #104B99;
        overflow: hidden;

        &:nth-child(3n + 3) {
            margin-right: 0;
        }
    }

    .product-item.last {
        margin-left: 1.5rem;
    }

    .product-title {
        // height: 2.4rem;
        margin-bottom: 2rem;
        font-size: 1.8rem;
        font-weight: bold;
        color: #ffffff;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .product-text {
        height: 5rem;
        line-height: 2.5rem;
        font-size: 1.6rem;
        color: #ffffff;
    }

    .product-tag-box {
        width: 100%;
        border-bottom: 1px solid #104B99;
        display: flex;
    }

    .product-tag-box.none-br {
        border-bottom: none;
    }

    .product-tag-box.none-br .product-tag {
        margin-bottom: 0;
    }

    .product-tag {
        margin: 2rem 0;
        margin-right: 0.8rem;
        padding: 0.4rem 1.5rem;
        background: #037aff;
        border-radius: 4px;
        font-size: 1.3rem;
        color: #fff;

        &.yellow {
            color: #ff8f1f;
            background: rgba(255, 143, 31, 0.1);
        }
    }

    .star-box {
        width: 100%;
        height: 2.5rem;
        line-height: 2.5rem;
        margin-top: 2rem;
        display: flex;
        justify-content: space-between;
    }

    .star-title {
        font-size: 1.6rem;
        color: #fcfcfc;
        // width: 50%;
        // width: calc(100% - 200px);
        white-space: nowrap;
        overflow: hidden; //文本超出隐藏
        text-overflow: ellipsis; //文本超出省略号替代
    }

    .star-title span {
        color: #f06300;
    }

    .star-container {
        float: right;
    }

    .star-container img {
        width: 2.4rem;
        height: 2.4rem;
        margin-left: 0.5rem;
    }
}

.pagination-box {
    width: 100%;
    height: 10rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tab-box {
    width: 136rem;
    height: 10rem;
    margin: 3rem auto;
    display: flex;

    .tab-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        flex: 1;
        border-radius: 8px;
        cursor: pointer;
        background: linear-gradient(180deg, rgba(245, 248, 252, 0.7) 0%, #ffffff 100%);
        border: 1px solid #ffffff;
        box-shadow: 8px 8px 20px 0px rgba(231, 237, 247, 0.51);

        &:last-child {
            margin-left: 2rem;
        }

        &.active {
            border: none;
            background: linear-gradient(0deg, #037aff 0%, #03dbff 100%);
            box-shadow: 0px 2px 6px 0px rgba(3, 122, 255, 0.37);

            .tab-text {
                color: #ffffff;
            }

            img {
                display: block;
            }
        }

        img {
            width: 3rem;
            height: auto;
            display: none;
            margin-bottom: 0.5rem;
        }

        .tab-text {
            font-size: 1.8rem;
            font-weight: bold;
            color: #232323;
        }
    }
}
    }
    ::-webkit-scrollbar {
        width: 5px;
        height: 10px;
    }

    /* 滚动条轨道 */
    ::-webkit-scrollbar-track {
        background-color: #234470;
    }

    /* 滚动条滑块 */
    ::-webkit-scrollbar-thumb {
        background-color: #061c57;
    }

    /* 鼠标悬停在滚动条上的滑块 */
    ::-webkit-scrollbar-thumb:hover {
        background-color: #555;
    }
}
.backToBox {
    position: absolute;
    top: 8rem;
    right: 2%;
    display: flex;
    .backTo {
        background-image: url("../../../../../assets/bigScreen/backTo.png");
        color: #2dccff;
        background-size: 100% 100%;
        width: fit-content;
        padding: 2px 40px 10px 10px;
        font-weight: 600;
        cursor: pointer;
        margin-left: 10px;
        div {
            padding-top: 5px;
        }
    }
}::v-deep {
    .ant-btn-primary {
        border-color: #037aff;
        background: #037aff;
    }

    .ant-input {
        background: rgba(68, 148, 255, 0.12);
        border: none;
        color: #ffffff;
    }

    .ant-pagination-item {
        background: rgba(8, 26, 48, 0.8);
        border: 1px solid #0b2f5f;
    }

    .ant-pagination-item a {
        color: #ffffff;
    }

    .ant-pagination-prev .ant-pagination-item-link,
    .ant-pagination-next .ant-pagination-item-link {
        background: rgba(8, 26, 48, 0.8);
        border: 1px solid #0b2f5f;
        color: #707981;
    }

    .ant-pagination-disabled .ant-pagination-item-link {
        background: rgba(8, 26, 48, 0.8);
        border: 1px solid #0b2f5f;
        color: #707981;
    }

    .ant-pagination-item-active {
        background: #004dfd;
        border-radius: 2px;
        border: none;
    }

    .ant-pagination-jump-prev
        .ant-pagination-item-container
        .ant-pagination-item-ellipsis,
    .ant-pagination-jump-next
        .ant-pagination-item-container
        .ant-pagination-item-ellipsis {
        color: #ffffff;
    }
    .ant-select-selector {
        background-color: transparent !important;
        background: rgba(8, 26, 48, 0.8) !important;
        border: 1px solid #0b2f5f !important;
        color: #ffffff !important;
    }
}
</style>
